<template>
  <div id="album">
    <div class="img-container">
      <img :src="album.picUrl" @load="imgLoad" alt="">
      <img class="chang-pian" src="~assets/img/chang_pian.jpg" alt="">
    </div>
    <div class="container">
      <span class="title">{{ album.name }}</span>
      <div>
        <div
          v-for="(item, index) in songs"
          :key="index"
          :class="{
            'song-item': true,
            isEven: (index - 1) % 2 === 0,
            'is-active': isActive(index)
            }"
          @click="songClick(index)">
          <div class="number">{{ (index + 1) | doubleDigit }}</div>
          <div class="name">
            {{ item.name }}
            <div class="alia" v-if="item.alia.length !== 0">
              (<span
              v-for="(aliaItem, index) in item.alia"
              :key="index">{{ aliaItem }}</span>)
            </div>
          </div>
          <div class="duration">{{ item.dt | timeFormat }}</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import types from 'utils/types.js'
import { doubleClick, _setInterval } from 'utils'

export default {
  name: 'Album',
  data () {
    return {
      songs: null,
      songDoubleClick: null
    }
  },
  props: {
    album: {
      type: Object,
      default () {
        return {}
      }
    },
    index: {
      type: Number
    },
    currentIndex: {
      type: Array,
      default () {
        return []
      }
    }
  },
  computed: {
    // 返回双击选中的歌曲
    songData () {
      // console.log(this.songs[this.currentIndex[0]])
      return this.songs[this.currentIndex[1]]
    }
  },
  created () {
    this._getAlbumContent()
    this._getDoubleClick()
  },
  filters: {
    // 1. 不足两位补0
    doubleDigit (index) {
      if (index === undefined) return ''
      return ('' + index).padStart(2, '0')
    }
  },
  methods: {
    // 1. 获取专辑内容
    async _getAlbumContent () {
      const result = await this.$http.get(`/album?id=${this.album.id}`)
      if (result.status !== 200 || result.data.code !== 200) return this.$message.info('获取专辑歌曲失败')
      // console.log(result)
      this.songs = result.data.songs
    },
    // 2. 点击激活
    songClick (index) {
      this.$emit('songClick', this.index, index)
      // 双击触发
      this.songDoubleClick()
    },
    // 3. 是否被点击
    isActive (index) {
      if (this.currentIndex.length !== 0 && this.index !== this.currentIndex[0]) return false
      if (index === this.currentIndex[1]) return true
      return false
    },
    // 4. 获取双击函数
    _getDoubleClick () {
      this.songDoubleClick = doubleClick(() => {
        // console.log('双击')
        // 如果是已经在播放的歌曲, 则不执行
        if (this.$store.state.playInfo.songData && this.$store.state.playInfo.songData.id === this.songData.id) {
          // return this.$audio.play()
          return false
        }
        this.playSong()
      })
    },
    // 5. 播放歌曲
    async playSong () {
      const result = await this.$http.get(`/song/url?id=${this.songData.id}`)
      // console.log(result.data)
      // 获取失败
      if (result.status !== 200 || result.data.code !== 200) {
        return this.$message.info('获取歌曲失败')
      }
      // 获取成功
      this.$audio.src = result.data.data[0].url
      this.$audio.play()
      // 因为_setInterval内置了清空原有计时器所以不用clearTimeout
      _setInterval(() => { this.$store.commit(types.ADD_TIMER) }, 1000, this.$timerId)
      this.$store.commit(types.PLAY_SONG, this.songData)
    },
    // 6. 图片加载完成
    imgLoad () {
      this.$emit('imgLoad')
    }
  }
}
</script>

<style scoped lang="less">
#album {
  user-select: none;
  margin-top: 50px;
  display: flex;
  .img-container {
    position: relative;
    width: 160px;
    height: 160px;
    img {
      position: absolute;
      height: 100%;
    }
    .chang-pian {
      position: absolute;
      // top: -100%;
      right: 0;
      transform: translateX(100%);
    }
  }
  .container {
    flex: 1;
    min-height: 30px;
    margin-left: 80px;
    .title {
      display: block;
      color: #333;
      font-size: 14px;
      margin-bottom: 10px;
    }
    > div {
      border: 1px solid #e1e1e2;
      .song-item {
        display: flex;
        line-height: 30px;
        font-size: 13px;
        color: #b2b2b2;
        width: 100%;
        .number {
          padding-left: 10px;
          flex: 1;
        }
        .name {
          display: flex;
          flex: 8;
          color: #333;
          letter-spacing: 0.1em;
          .alia {
            letter-spacing: 0;
            padding-left: 5px;
            color: #b2b2b2;
          }
        }
        .duration {
          flex: 1;
        }
        &.isEven {
          background-color: #f5f5f7;
        }
        &:hover, &.is-active {
          background-color: #ebeced;
        }
      }
    }
  }
}
</style>
